mvaneijgen

Hi @jaeyholic welcome to the forum! Your codesandbox link is not working, maybe you didn't publish it yet? Personally I like to work in Codepen, just plain HTML, CSS and JS, so that I don't have to worry about my preferred library of choice throwing errors and really can focus on the effect I'm going for, but of course to each their own. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. It is probably not the effect you're going for, but maybe it points you in the right direction. This one works on click, but could also work on scroll, again everything in GSAP starts with an animation and you can then hook it to what ever you like to play that animation. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/Yzdzxem

Hi @xMrCrunchyx welcome to the forum! Did you know GSAP has its own matchMedia() build i which has some nice features when working with GSAP for instance doing some clean up and reinitiating code when breakpoints are met, check it out https://gsap.com/docs/v3/GSAP/gsap.matchMedia() If that doesn't, work we would love to see a minimal demo, so that we can take a deeper look at your code in action. Hope it helps and happy tweening!

Yeah just use the SplitText plugin and move the one word to x: -50 and the other x: 50 and they will split. If you still need help please share a minimal demo and we'll be happy to take a look at your setup. Hope it helps and happy tweening!

Hi @devdongvi welcome to the forum! Here another topic with two different button effects shared by @Cassie, I couldn't find the exact one, but maybe some more Codepen examples get shared in the future. Seems like a fun challenge though! What have you tried already? We love to see what you can come up with, that is the best way to learn the tools! If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening!

It is important in which order you create ScrollTriggers, certainly when things are pining! You can manipulate this if you use refreshPriority, see docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ I'm not completely sure what you want to do, but be sure to keep in mind to remove ScrollTrigger from your setup, to see if your animation are doing what they suppose to without ScrollTrigger, so that you can debug one part at a time. This make debugging a lot easier. If I reverse the order of your functions, things look to work VideoSectionAnimation(); ScalingBannerWithProducts(); but again I'm not sure what suppose to happen. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/wvbwMedN?editors=0010

Hi @jeycraz welcome to the forum! The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. I've written a guide how you can create any card stacking effect using a simple base. I think your struggle here is that you have to many ScrollTriggers controlling to many animations. As you can see in my post below all this can be done with just one timeline and one ScrollTrigger, check it out! Check it out here a modification on the logic shared in the post with your animation requirements, showing you how you can implement something like this. I've written the tweens out by hand, doing this allows you to see patterns emerge which will make it easier to convert this to dynamic code. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwmbrbL?editors=0010

The past few weeks there we're an influx of post using ScrollTrigger and the ScrollTo plugin, which made me write a post how the logic behind it works. Also check the second post by @GreenSock who shares some great helper functions! Hope it helps and happy tweening!

Does this helper function help SplitText lines in nested elements https://gsap.com/docs/v3/HelperFunctions/helpers/nestedLinesSplit/?

Our own @Carl has a great tutorial on that. The first video is for creating staggers and the second one how to seamlessly loop that animation. It is not simple, but with this explanation I think you'll manage When I'm building complex animation I always fall in the trap of optimising things way to early and some times it is just better to write things out by hand and only when it works optimise that code. I've written a post based on that, maybe it helps you. Hope it helps and happy tweening!

I think the following tutorial by our own @Carl will be helpful. Hope it helps and happy tweening!

Hi @claraapta welcome to the forum! As with anything in GSAP everything starts with an animation, so if the animation is not working it will never work on scroll. For now I've disabled ScrollTrigger in your demo, but be sure to enable it again when you think everything is correct. In the demo below we just get the total width of all the sections add together and use that as your x value. Bonus point for using a function based value https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values so that it gets recalculated on resize. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQLBzJ?editors=0010

Hi @Sam Tremblay, sorry that you feel that way. We love to help everyone here on these forums and not having an easy way to thinker with the code makes it that much harder to help you. That is why we ask our users for a minimal demo, it is a way to help us, help you! I get it can be frustrating when you're on a dead line and something is not working. My workflow debugging this would be to remove all unnecessary code and remove the ScrollTrigger logic and just see what the animation of the boxes are doing, but there is just no way for us to modify the code on a live website and thus no way to help you debug. I personally also work in PHP, but all my animation start out on Codepen. I find it just so much easier to have a place which is just pure HTML, CSS and JS and worry about the logic that needs to happen, so when in comes time to integrate it in my framework of choice I can easily fall back on the basic version that I know is working, bonus you have an easy version you can share if things are not working! Again we love to help, so hope you'll be able to create a minimal demo, because it looks like a cool animation!

Hi @simran_evoco welcome to the forum! I've just written a post how you can do this using the ScrollTo Plugin, check it out. Hope it helps and happy tweening!

I see a lot of people hung up on creating buttons to scroll to a particular point on a page while using ScrollTrigger. Of course GSAP has you covered with this! See the ScrollTo plugin! But as with everything in GSAP it starts with an animation. First of please read my post about creating a stacking card effect, it will be used for the bases of this post So as usual everything in GSAP starts with an animation, so you first have to have an animation before you start doing anything on scroll, first focus on creating the animation you want to happen and when that is done we can worry about enhancing it with some scrolling https://codepen.io/mvaneijgen/pen/WNWqEYx If you’re happy with the animation you can add some ScrollTrigger logic to see how your animation works on scroll. https://codepen.io/mvaneijgen/pen/OJGevrB?editors=0010 Ok, now for the reason you’re here. How can we have a button that scrolls to a certain position on the page? That is where the ScrollTo plugin comes in, if you check the docs (https://gsap.com/docs/v3/Plugins/ScrollToPlugin/), the most simple setup is to just animate to a pixel value, let’s see how that works! The below example scrolls to 1000px, simple enough but I hope it illustrates what it is doing under the hood, because scrolling to a specific section will be nothing more than getting the pixel value you want to scroll to and using this as the value in the scrollTo: property! https://codepen.io/mvaneijgen/pen/JjVQOyK But now we want to scroll to the third card in the animation, how can we do this? We know the total scroll distance of the ScrollTrigger because we define that in the start and end properties, right now the ScrollTrigger starts on the top of the browser and has a distance of 4 times the current window height (end: `${window.innerHeight * 4} top`) and we have in total 4 animations! This means each slide animates over the hight of the window, so what do you think will happen if we animate to the current window hight times 2? Well let's see! https://codepen.io/mvaneijgen/pen/BaEgwoz It animates to the third slide! As you can see I’ve wrapped the code in an arrow function, this indicates to GSAP that we want to recalculate this value if ScrollTrigger.refresh() is triggered, which happens on a page resize, because when the page resized probably the height of the browser changes, so we need to get new values. If you do not use a function based value you indicate to GSAP that it should not recalculate it’s values and can use its cached values. If you want to read more please check out the docs https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values Great we’re done! lets add some more content to the page and everything will be working just fine! But wait!? Why does it now only scroll to the second slide? Before it was scrolling to the third slide. Well all ScrollTrigger is doing is animating to a specific pixel value and because we’ve add another section before it, the scroll distance will be different. What you can do in this case is add the ScrollTrigger start value to the calculations, so instead of just animating to twice the window height, we animate to tl.scrollTrigger.start + window.innerHeight * 2, just try it your self and you’ll see it will always scroll to the top of the ScrollTrigger + twice the window height https://codepen.io/mvaneijgen/pen/BaEgwoz Ok, I hear you thinking, but I want to animate to each slide, and what if my scroll distance changes then I need to update my calculations every where! You are totally right! And the folks on the GSAP team has thought of everything! So what you can do is add labels to your timeline and then scroll to those labels! This can be as simple as scrolling to a specific label eg tl.scrollTrigger.labelToScroll("label3") or this can be be fancy like the example below by getting the next label in the timeline and scrolling to that, I hope you see that you can as easily scroll to the previous label. https://codepen.io/mvaneijgen/pen/gOyNeqj?editors=0010 If you don't have labels in your timeline you can also do some math to scroll to a specific point in a timeline. The progress of a timeline is always between 0 and 1, so what you can do is get the end and start values of you ScrollTrigger and then subtract and then multiply that by 0.5 to that the halfway point of the animation or any other value! Again to emphasise all ScrollTo need is a pixel value and it is up to you to get the correct value. GSAP gives you all the tools you need, but it is for you to figure out what the math is behind the logic you are looking for! Hope it helps and happy tweening!

That is called Flash Of Unstyled content eg FOUC, check out this post https://gsap.com/resources/fouc/ Best is to have GSAP fire when everything has loaded especially images, fonts ect, because if you use ScrollTrigger the hight of everything is really important. Sadly we don't have the time and resources to provide free general consulting, but your code looks fine. I would not worry about it the only thing I can see is that you use x: "120%" and especially for percent based values we have xPercent: 120, same as x: `${distance}px`, I would write it like x: () => distance, this will get distance again if ScrollTrigger.refresh() is called (which happens on page resize) read more about function based values https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values Hope it helps if you need further assistance, please provide a minimal demo, so that we can take a look at your code in action. Happy tweening!